@univerjs/docs-ui 1.0.2 → 1.0.4

package/lib/es/index.js

@@ -1,15 +1,15 @@
-import { BaselineOffset, BlockType, BooleanNumber, BuildTextUtils, COLORS, ColorKit, ColumnSeparatorType, CommandType, CustomDecorationType, CustomRangeType, DEFAULT_DOCUMENT_PARAGRAPH_LINE_SPACING, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_ABOVE, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_BELOW, DEFAULT_EMPTY_DOCUMENT_VALUE, DEFAULT_STYLES, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DOC_RANGE_TYPE, DashStyleType, DataStreamTreeNodeType, DataStreamTreeTokenType, DeleteDirection, DependentOn, Direction, Disposable, DisposableCollection, DocumentBlockRangeType, DocumentBlockType, DocumentFlavor, DrawingTypeEnum, EDITOR_ACTIVATED, ErrorService, FOCUSING_COMMENT_EDITOR, FOCUSING_COMMON_DRAWINGS, FOCUSING_DOC, FOCUSING_EDITOR_STANDALONE, FOCUSING_SHAPE_TEXT_EDITOR, FOCUSING_UNIVER_EDITOR, HorizontalAlign, ICommandService, IConfigService, IConfirmService, IContextService, ILogService, IPermissionService, IUndoRedoService, IUniverInstanceService, ImageSourceType, Inject, Injector, InterceptorManager, JSON1, JSONX, LOCALE_META, LRUMap, ListGlyphType, LocaleService, MODERN_DOCUMENT_DEFAULT_MARGIN, MODERN_DOCUMENT_WIDTH, MemoryCursor, ModernDocumentWidthMode, NAMED_STYLE_MAP, NamedStyleType, ObjectPermissionService, ObjectRelativeFromH, ObjectRelativeFromV, Optional, PAGE_SIZE, PAPER_TYPES, PRESERVE_INSERTED_PARAGRAPH_IDS, PRESET_LIST_TYPE, PageOrientType, Plugin, PositionedObjectLayoutType, PresetListType, QuickListTypeMap, RANGE_DIRECTION, Rectangle, RedoCommand, RegionService, RichTextBuilder, RxDisposable, SHEET_EDITOR_UNITS, SectionType, SliceBodyType, SpacingRule, TableAlignmentType, TableRowHeightRule, TableSizeType, TableTextWrapType, TextX, TextXActionType, ThemeService, Tools, UndoCommand, UniverInstanceType, UpdateDocsAttributeType, VerticalAlign, checkForSubstrings, cloneBodyWithFreshParagraphIds, containsInteriorInsertionOffset, createIdentifier, createInterceptorKey, createInternalEditorID, createParagraphId, createSectionId, debounce, fromEventSubject, generateRandomId, getBlockRangeInterval, getBodySlice, getBodySliceForTextXAction, getColorStyle, getCustomBlockIdsInSelections, getParagraphContentStartOffset, getParagraphContentStartOffsets, getPlainText, getRichTextEditPath, getSectionHeaderFooterReferenceKey, getTableRangeInterval, getTextRunSlice, isCommentEditorID, isInternalEditorID, isSafeUrl, merge, mergeOverrideWithDependencies, normalizeBody, remove, resolveDocumentParagraphStyle, resolveSectionHeaderFooterReference, resolveSectionHeaderFooterReferences, sequenceExecuteAsync, skipParseTagNames, toDisposable, touchDependencies, validateDocBodyStructure } from "@univerjs/core";
-import { CreateHeaderFooterCommand, DeleteTextCommand, DocBlockMoveValidatorService, DocContentInsertService, DocHistoryAction, DocInterceptorService, DocLayoutExecutorService, DocLayoutExecutorState, DocLayoutSessionStatus, DocSelectionManagerService, DocSkeletonManagerService, DocStateChangeManagerService, DocStateEmitService, HeaderFooterType, IDocStateChangeInterceptorService, InsertDocumentColumnBreakCommand, InsertDocumentSectionBreakCommand, InsertTextCommand, RichTextEditingMutation, SetDocumentPermissionCommand, SetSectionHeaderFooterLinkCommand, SetTextSelectionsOperation, UniverDocsPlugin, UpdateDocumentSectionCommand, UpdateTextCommand, buildDocTransform, canEditDocumentTargets, consumeContentInsertRange, createSectionColumnProperties, generateParagraphs, getDocumentEditTargetObjectIds, getDocumentParagraphPermissionObjectId, getDocumentPermissionValue, getDocumentSectionPermissionObjectId, getTopLevelSectionBreaks, isSheetLikeDocsCustomBlockChildType, resolveDocsCustomBlockSize, shouldUseInlineTextSelectionForDocsCustomBlockDrawing } from "@univerjs/docs";
+import { BaselineOffset, BlockType, BooleanNumber, BuildTextUtils, COLORS, ColorKit, ColumnSeparatorType, CommandType, CustomDecorationType, CustomRangeType, DEFAULT_DOCUMENT_PARAGRAPH_LINE_SPACING, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_ABOVE, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_BELOW, DEFAULT_EMPTY_DOCUMENT_VALUE, DEFAULT_STYLES, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DOC_RANGE_TYPE, DashStyleType, DataStreamTreeNodeType, DataStreamTreeTokenType, DeleteDirection, DependentOn, Direction, Disposable, DisposableCollection, DocumentBlockRangeType, DocumentBlockType, DocumentFlavor, DrawingTypeEnum, EDITOR_ACTIVATED, ErrorService, FOCUSING_COMMENT_EDITOR, FOCUSING_COMMON_DRAWINGS, FOCUSING_DOC, FOCUSING_EDITOR_STANDALONE, FOCUSING_FX_BAR_EDITOR, FOCUSING_SHAPE_TEXT_EDITOR, FOCUSING_UNIVER_EDITOR, HorizontalAlign, ICommandService, IConfigService, IConfirmService, IContextService, ILogService, IPermissionService, IUndoRedoService, IUniverInstanceService, ImageSourceType, Inject, Injector, InterceptorManager, JSON1, JSONX, LOCALE_META, LRUMap, ListGlyphType, LocaleService, MODERN_DOCUMENT_DEFAULT_MARGIN, MODERN_DOCUMENT_WIDTH, MemoryCursor, ModernDocumentWidthMode, NAMED_STYLE_MAP, NamedStyleType, ObjectPermissionService, ObjectRelativeFromH, ObjectRelativeFromV, Optional, PAGE_SIZE, PAPER_TYPES, PRESERVE_INSERTED_PARAGRAPH_IDS, PRESET_LIST_TYPE, PageOrientType, Plugin, PositionedObjectLayoutType, PresetListType, QuickListTypeMap, RANGE_DIRECTION, Rectangle, RedoCommand, RegionService, RichTextBuilder, RxDisposable, SHEET_EDITOR_UNITS, SectionType, SliceBodyType, SpacingRule, TableAlignmentType, TableRowHeightRule, TableSizeType, TableTextWrapType, TextX, TextXActionType, ThemeService, Tools, UndoCommand, UniverInstanceType, UpdateDocsAttributeType, VerticalAlign, checkForSubstrings, cloneBodyWithFreshParagraphIds, containsInteriorInsertionOffset, createIdentifier, createInterceptorKey, createInternalEditorID, createParagraphId, createSectionId, debounce, fromEventSubject, generateRandomId, getBlockRangeInterval, getBodySlice, getBodySliceForTextXAction, getColorStyle, getCustomBlockIdsInSelections, getParagraphContentStartOffset, getParagraphContentStartOffsets, getPlainText, getRichTextEditPath, getSectionHeaderFooterReferenceKey, getTableRangeInterval, getTextRunSlice, isCommentEditorID, isInternalEditorID, isSafeUrl, merge, mergeOverrideWithDependencies, normalizeBody, remove, resolveDocumentParagraphStyle, resolveSectionHeaderFooterReference, resolveSectionHeaderFooterReferences, sequenceExecuteAsync, skipParseTagNames, toDisposable, touchDependencies, validateDocBodyStructure } from "@univerjs/core";
+import { CreateHeaderFooterCommand, DeleteTextCommand, DocBlockMoveValidatorService, DocContentInsertService, DocHistoryAction, DocInterceptorService, DocLayoutExecutorService, DocLayoutExecutorState, DocLayoutSessionStatus, DocSelectionManagerService, DocSkeletonManagerService, DocStateChangeManagerService, DocStateEmitService, HeaderFooterType, IDocStateChangeInterceptorService, InsertDocumentColumnBreakCommand, InsertDocumentSectionBreakCommand, InsertTextCommand, RichTextEditingMutation, SetDocumentPermissionCommand, SetSectionHeaderFooterLinkCommand, SetTextSelectionsOperation, UniverDocsPlugin, UpdateDocumentSectionCommand, UpdateTextCommand, buildDocTransform, canEditDocumentTargets, consumeContentInsertRange, createSectionColumnProperties, generateParagraphs, getDocumentEditTargetObjectIds, getDocumentParagraphPermissionObjectId, getDocumentPermissionValue, getDocumentSectionPermissionObjectId, getTopLevelSectionBreaks, isSheetLikeDocsCustomBlockChildType, resolveDocsCustomBlockSize, shouldUseInlineTextSelectionForDocsCustomBlockDrawing, transformDocumentTextRanges } from "@univerjs/docs";
 import * as EngineRender from "@univerjs/engine-render";
 import { BaseObject, CURSOR_TYPE, DRAWING_OBJECT_UPPER_LAYER_INDEX, DeviceInputEventType, DocBackground, DocumentEditArea, DocumentSkeletonPageType, Documents, GlyphType, IRenderManagerService, Layer, LineType, Liquid, NORMAL_TEXT_SELECTION_PLUGIN_STYLE, PageLayoutType, Path, RENDER_CLASS_TYPE, Rect, RegularPolygon, ScrollBar, ScrollTimer, Shape, TRANSFORM_CHANGE_OBSERVABLE_TYPE, UniverRenderEnginePlugin, Vector2, Viewport, compareDocumentSkeletonNestedPagePathOrder, documentSkeletonLineIterator, documentSkeletonTableIterator, getColor, getDocsTableRenderViewport, getDocsTableViewportLeft, getDocumentSkeletonColumnPagePathInfo, getDocumentSkeletonNestedPageOffset, getLastColumn, getNextWheelZoomRatio, getNumberUnitValue, getOffsetRectForDom, getPageFromPath, getParagraphByGlyph, getSystemHighlightColor, getTableIdAndSliceIndex, getTopmostDocsTableHit, hasListGlyph, isFirstGlyph, isIndentByGlyph, parseDataStreamToTree, pixelToPt, ptToPixel, pxToNum, registerDocumentLayoutPresentation } from "@univerjs/engine-render";
-import { Button, Checkbox, Dropdown, DropdownMenu, InputNumber, MessageType, MobileSelect, Popup, Select, Separator, Tooltip, borderClassName, clsx, resetButtonClassName, scrollbarClassName, useMobileKeyboardViewportLayout } from "@univerjs/design";
+import { Button, Checkbox, Dialog, Dropdown, DropdownMenu, InputNumber, MessageType, MobileSelect, Popup, Select, Separator, Tooltip, borderClassName, clsx, resetButtonClassName, scrollbarClassName, selectClassName, useMobileKeyboardViewportLayout } from "@univerjs/design";
 import { BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, ComponentManager, ContextMenuGroup, ContextMenuPanel, ContextMenuPosition, CopyCommand, CutCommand, EMOJI_PICKER_COMPONENT, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FormatPainterSessionService, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, ICanvasPopupService, IClipboardInterfaceService, IContextMenuService, ILayoutService, IMenuManagerService, IMessageService, IRibbonService, IShortcutService, ISidebarService, IUIPartsService, IWorkbenchService, IconManager, KeyCode, MOBILE_UI_MODE, MenuItemType, MenuManagerPosition, MetaKeys, MobileDrawer, MobileKeyboardInsetContext, MobileMenu, MobileZoomIndicator, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, RectPopup, RibbonInsertGroup, RibbonStartGroup, SYMBOL_PICKER_COMPONENT, Slider, ToolbarButton, ToolbarItem, UniverMobileUIPlugin, bindFormatPainterCanvas, connectInjector, getMenuHiddenObservable, getMobileCanvasPanDelta, imageMimeTypeSet, objectPermissionMenuItemFactory, openObjectPermissionDialog, openObjectPermissionPanel, preventBrowserZoomInContainers, useConfigValue, useDependency, useEvent, useInjector, useMobileCanvasPanel, useMobileCanvasViewport, useObservable } from "@univerjs/ui";
 import { UnitAction, UnitObject } from "@univerjs/protocol";
 import { BehaviorSubject, EMPTY, Observable, Subject, animationFrameScheduler, auditTime, combineLatest, debounceTime, distinctUntilChanged, filter, first, fromEvent, map, merge as merge$1, observeOn, of, shareReplay, startWith, switchMap, take, takeUntil, tap, throttleTime } from "rxjs";
 import { bufferTime, filter as filter$1, map as map$1 } from "rxjs/operators";
-import { createElement, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createElement, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AddImageIcon, AlignTextBothIcon, BoldIcon, CatalogueIcon, CheckMarkIcon, CloseIcon, ColorWheelMultiIcon, ColumnIcon, CopyDoubleIcon, CutIcon, DeleteColumnDoubleIcon, DeleteIcon, DeleteRowDoubleIcon, DeleteTableDoubleIcon, DocPasteOptionsIcon, DocSettingIcon, DownIcon, FontColorDoubleIcon, GridIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, HeaderFooterIcon, HorizontallyIcon, InsertDoubleIcon, InsertRowAboveDoubleIcon, InsertRowBelowDoubleIcon, ItalicIcon, KeyboardIcon, LeftInsertColumnDoubleIcon, LeftJustifyingIcon, LineIndentDecreaseIcon, LineIndentIncreaseIcon, LoadingMultiIcon, MenuIcon, MoreHorizontalIcon, MoreLeftIcon, MoreRightIcon, NoColorDoubleIcon, OrderIcon, PaintBucketDoubleIcon, ParagraphSettingIcon, PasteSpecialDoubleIcon, QuickAddIcon, ReduceDoubleIcon, ReduceIcon, RightInsertColumnDoubleIcon, RightJustifyingIcon, SectionSettingIcon, ShapeIcon, SmileIcon, StatisticalFunctionIcon, StrikethroughIcon, SubscriptIcon, SubtitleTypeIcon, SuperscriptIcon, SymbolsIcon, TextColorSwatchDoubleIcon, TextIcon, TextTypeIcon, TitleTypeIcon, TodoListDoubleIcon, UnderlineIcon, UnorderIcon, WriteIcon } from "@univerjs/icons";
+import { AddImageIcon, AlignTextBothIcon, BoldIcon, CalendarIcon, CatalogueIcon, CheckMarkIcon, CloseIcon, ColorWheelMultiIcon, ColumnIcon, CopyDoubleIcon, CutIcon, DeleteColumnDoubleIcon, DeleteIcon, DeleteRowDoubleIcon, DeleteTableDoubleIcon, DocPasteOptionsIcon, DocSettingIcon, DownIcon, FontColorDoubleIcon, GridIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, HeaderFooterIcon, HorizontallyIcon, InsertDoubleIcon, InsertRowAboveDoubleIcon, InsertRowBelowDoubleIcon, ItalicIcon, KeyboardIcon, LeftInsertColumnDoubleIcon, LeftJustifyingIcon, LineIndentDecreaseIcon, LineIndentIncreaseIcon, LoadingMultiIcon, MenuIcon, MoreDownIcon, MoreHorizontalIcon, MoreLeftIcon, MoreRightIcon, NoColorDoubleIcon, NumberIcon, OrderIcon, PaintBucketDoubleIcon, ParagraphSettingIcon, PasteSpecialDoubleIcon, QuickAddIcon, ReduceDoubleIcon, ReduceIcon, RightInsertColumnDoubleIcon, RightJustifyingIcon, SectionSettingIcon, ShapeIcon, SmileIcon, StatisticalFunctionIcon, StrikethroughIcon, SubscriptIcon, SubtitleTypeIcon, SuperscriptIcon, SymbolsIcon, TextColorSwatchDoubleIcon, TextIcon, TextTypeIcon, TitleTypeIcon, TodoListDoubleIcon, UnderlineIcon, UnorderIcon, WriteIcon } from "@univerjs/icons";
 import { getDrawingShapeKeyByDrawingSearch } from "@univerjs/drawing";
 
 //#region src/basics/docs-view-key.ts
@@ -1643,10 +1643,10 @@ var NodePositionConvertToCursor = class {
 			let segmentPage = page;
 			if (pageType === 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 === 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 === DocumentSkeletonPageType.NOTE) {
 				var _getPageFromPath3, _page$notes;
 				const noteId = (_getPageFromPath3 = getPageFromPath(skeletonData, path)) === null || _getPageFromPath3 === void 0 ? void 0 : _getPageFromPath3.segmentId;
@@ -1813,8 +1813,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) {
@@ -2229,7 +2229,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 = getPageFromPath({
@@ -2307,7 +2307,7 @@ function getLineBounding(pointsGroup) {
 	});
 }
 var TextRange = class {
-	constructor(_scene, _document, _docSkeleton, anchorNodePosition, focusNodePosition, style = NORMAL_TEXT_SELECTION_PLUGIN_STYLE, _segmentId = "", _segmentPage = -1) {
+	constructor(_scene, _document, _docSkeleton, anchorNodePosition, focusNodePosition, style = NORMAL_TEXT_SELECTION_PLUGIN_STYLE, _segmentId = "", _segmentPage = -1, _logicalRange) {
 		this._scene = _scene;
 		this._document = _document;
 		this._docSkeleton = _docSkeleton;
@@ -2316,6 +2316,7 @@ var TextRange = class {
 		this.style = style;
 		this._segmentId = _segmentId;
 		this._segmentPage = _segmentPage;
+		this._logicalRange = _logicalRange;
 		_defineProperty(this, "rangeType", DOC_RANGE_TYPE.TEXT);
 		_defineProperty(this, "_current", false);
 		_defineProperty(this, "_rangeShape", void 0);
@@ -2345,6 +2346,7 @@ var TextRange = class {
 	}
 	get startOffset() {
 		var _this$_docSkeleton$ge;
+		if (this._logicalRange) return Math.min(this._logicalRange.startOffset, this._logicalRange.endOffset);
 		const { startOffset } = getOneTextSelectionRange(this._cursorList) ?? {};
 		const body = (_this$_docSkeleton$ge = this._docSkeleton.getViewModel().getDataModel().getSelfOrHeaderFooterModel(this._segmentId)) === null || _this$_docSkeleton$ge === void 0 ? void 0 : _this$_docSkeleton$ge.getBody();
 		if (startOffset == null || body == null) return startOffset;
@@ -2353,6 +2355,7 @@ var TextRange = class {
 	}
 	get endOffset() {
 		var _this$_docSkeleton$ge2;
+		if (this._logicalRange) return Math.max(this._logicalRange.startOffset, this._logicalRange.endOffset);
 		const { endOffset } = getOneTextSelectionRange(this._cursorList) ?? {};
 		const body = (_this$_docSkeleton$ge2 = this._docSkeleton.getViewModel().getDataModel().getSelfOrHeaderFooterModel(this._segmentId)) === null || _this$_docSkeleton$ge2 === void 0 ? void 0 : _this$_docSkeleton$ge2.getBody();
 		if (endOffset == null || body == null) return endOffset;
@@ -2376,6 +2379,7 @@ var TextRange = class {
 		return end;
 	}
 	get direction() {
+		if (this._logicalRange) return this._logicalRange.startOffset <= this._logicalRange.endOffset ? RANGE_DIRECTION.FORWARD : RANGE_DIRECTION.BACKWARD;
 		const { collapsed, anchorNodePosition, focusNodePosition } = this;
 		if (collapsed || anchorNodePosition == null || focusNodePosition == null) return RANGE_DIRECTION.NONE;
 		return compareNodePositionLogic(anchorNodePosition, focusNodePosition) ? RANGE_DIRECTION.FORWARD : RANGE_DIRECTION.BACKWARD;
@@ -2462,6 +2466,7 @@ var TextRange = class {
 	}
 	refresh() {
 		var _this$_anchorShape6, _this$_rangeShape2;
+		this._refreshLogicalRangePositions();
 		const { _document, _docSkeleton } = this;
 		const anchor = this.anchorNodePosition;
 		const focus = this.focusNodePosition;
@@ -2484,6 +2489,26 @@ var TextRange = class {
 		this._setCursorList(cursorList);
 		if (borderBoxPointGroup.length > 0) this._createOrUpdateRange(borderBoxPointGroup, docsLeft, docsTop);
 	}
+	_refreshLogicalRangePositions() {
+		var _this$_docSkeleton$ge3;
+		const range = this._logicalRange;
+		if (!range) return;
+		const start = Math.min(range.startOffset, range.endOffset);
+		const end = Math.max(range.startOffset, range.endOffset);
+		let first;
+		let last;
+		for (const page of ((_this$_docSkeleton$ge3 = this._docSkeleton.getSkeletonData()) === null || _this$_docSkeleton$ge3 === void 0 ? void 0 : _this$_docSkeleton$ge3.pages) ?? []) {
+			if (page.isLayoutPlaceholder || page.isMaterializationPlaceholder || page.ed < start || page.st >= end) continue;
+			const positions = findDocRangeNodePositions(this._docSkeleton, Math.max(start, page.st), Math.min(end - 1, page.ed), this._segmentId, this._segmentPage);
+			if (positions) {
+				first ??= positions.startPosition;
+				last = positions.endPosition;
+			}
+		}
+		const forward = range.startOffset <= range.endOffset;
+		this.anchorNodePosition = forward ? first : last;
+		this.focusNodePosition = forward ? last : first;
+	}
 	_isEmpty() {
 		return this.anchorNodePosition == null && this.focusNodePosition == null;
 	}
@@ -2798,7 +2823,17 @@ function getColumnInputBoundaryCollapsedPosition(anchorPosition, focusPosition,
 function getTextRangeFromCharIndex(startOffset, endOffset, scene, document, skeleton, style, segmentId, segmentPage, startIsBack = true, endIsBack = true) {
 	const startNodePosition = skeleton.findNodePositionByCharIndex(startOffset, startIsBack, segmentId, segmentPage);
 	const endNodePosition = skeleton.findNodePositionByCharIndex(endOffset, endIsBack, segmentId, segmentPage);
-	if (startNodePosition == null || endNodePosition == null) return;
+	if (startNodePosition == null || endNodePosition == null) {
+		var _skeleton$getSkeleton;
+		const pages = (_skeleton$getSkeleton = skeleton.getSkeletonData()) === null || _skeleton$getSkeleton === void 0 ? void 0 : _skeleton$getSkeleton.pages;
+		const startPage = pages === null || pages === void 0 ? void 0 : pages[skeleton.findBodyPageIndexByCharIndex(startOffset)];
+		const endPage = pages === null || pages === void 0 ? void 0 : pages[skeleton.findBodyPageIndexByCharIndex(endOffset)];
+		if (segmentId === "" && startOffset !== endOffset && startPage && endPage && (startPage.isMaterializationPlaceholder || endPage.isMaterializationPlaceholder)) return new TextRange(scene, document, skeleton, void 0, void 0, style, segmentId, segmentPage, {
+			startOffset: startIsBack ? startOffset : startOffset + 1,
+			endOffset: endIsBack ? endOffset : endOffset + 1
+		});
+		return;
+	}
 	return new TextRange(scene, document, skeleton, startNodePosition, endNodePosition, style, segmentId, segmentPage);
 }
 function getRectRangeFromCharIndex(startOffset, endOffset, scene, document, skeleton, style, segmentId, segmentPage) {
@@ -2810,7 +2845,14 @@ function getRectRangeFromCharIndex(startOffset, endOffset, scene, document, skel
 function getRangeListFromCharIndex(startOffset, endOffset, scene, document, skeleton, style, segmentId, segmentPage) {
 	const startNodePosition = skeleton.findNodePositionByCharIndex(startOffset, true, segmentId, segmentPage);
 	const endNodePosition = skeleton.findNodePositionByCharIndex(endOffset, true, segmentId, segmentPage);
-	if (startNodePosition == null || endNodePosition == null) return;
+	if (startNodePosition == null || endNodePosition == null) {
+		const textRange = getTextRangeFromCharIndex(startOffset, endOffset, scene, document, skeleton, style, segmentId, segmentPage);
+		if (textRange) return {
+			textRanges: [textRange],
+			rectRanges: []
+		};
+		return;
+	}
 	return getRangeListFromSelection(startNodePosition, endNodePosition, scene, document, skeleton, style, segmentId, segmentPage);
 }
 function getRangeListFromSelection(anchorPosition, focusPosition, scene, document, skeleton, style, segmentId, segmentPage) {
@@ -3127,6 +3169,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);
@@ -3156,6 +3212,12 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 	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;
@@ -3289,15 +3351,13 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		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,
@@ -3388,7 +3448,7 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 				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);
@@ -3478,7 +3538,7 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		if (paragraphInfo == null) return;
 		const { content, st, nodeIndex } = paragraphInfo;
 		if (nodeIndex === -1) return;
-		const wordBoundary = getWordBoundaryByIndex(content, nodeIndex, st);
+		const wordBoundary = this._context.unitId === DOCS_NORMAL_EDITOR_UNIT_ID_KEY || this._context.unitId === 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 = [{
@@ -4067,10 +4127,26 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		}));
 	}
 	_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 !== 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) => {
@@ -5119,7 +5195,7 @@ const InnerPasteCommand = {
 			unitId: targetUnitId,
 			subUnitId: targetUnitId
 		};
-		const selections = docSelectionManagerService.getTextRanges(selectionParams) ?? [];
+		const selections = params.selections ?? docSelectionManagerService.getTextRanges(selectionParams) ?? [];
 		const rectRanges = docSelectionManagerService.getRectRanges(selectionParams) ?? [];
 		const selectionInfo = docSelectionManagerService.getSelectionInfo(selectionParams);
 		const { body: sourceBody, tableSource, drawings } = doc;
@@ -5615,7 +5691,7 @@ const CutContentCommand = {
 	id: "doc.command.inner-cut",
 	type: CommandType.COMMAND,
 	handler: (accessor, params) => {
-		var _selectionInfo$option3;
+		var _selectionInfo$option3, _docDataModel$getSelf7;
 		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
 		const commandService = accessor.get(ICommandService);
 		const univerInstanceService = accessor.get(IUniverInstanceService);
@@ -5635,12 +5711,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: RichTextEditingMutation.id,
 			params: {
 				unitId,
 				actions: [],
-				textRanges,
+				textRanges: clearsBody ? [{
+					...textRanges[0],
+					startOffset: 0,
+					endOffset: 0,
+					collapsed: true
+				}] : textRanges,
 				trigger: CutContentCommand.id
 			}
 		};
@@ -5657,6 +5740,31 @@ function isHorizontalLineParagraph(dataStream, paragraph) {
 	return Array.from(dataStream).every((token) => token === DataStreamTreeTokenType.PARAGRAPH || token === 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: 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: 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: {} }) {
@@ -6070,11 +6178,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(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(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: 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, Direction.LEFT, params.granularity)) return true;
 		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
 		const univerInstanceService = accessor.get(IUniverInstanceService);
 		const commandService = accessor.get(ICommandService);
@@ -6234,8 +6356,9 @@ const DeleteLeftCommand = {
 const DeleteRightCommand = {
 	id: "doc.command.delete-right",
 	type: CommandType.COMMAND,
-	handler: async (accessor) => {
+	handler: async (accessor, params) => {
 		var _docDataModel$getSelf5;
+		if ((params === null || params === void 0 ? void 0 : params.granularity) && !selectDeleteBoundary(accessor, Direction.RIGHT, params.granularity)) return true;
 		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
 		const docDataModel = accessor.get(IUniverInstanceService).getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
 		if (!docDataModel) return false;
@@ -8456,7 +8579,11 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		_defineProperty(this, "_umdToHtml", void 0);
 		this._umdToHtml = new UDMToHtmlService(docHtmlExportService);
 		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
-			if (!this._applyingPaste && command.type === CommandType.MUTATION) this.dismissPasteOptions();
+			var _command$params, _this$_pasteOptions$$;
+			if (this._applyingPaste || command.type !== 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();
@@ -8530,6 +8657,12 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 			mode
 		});
 	}
+	isPasteOptionsEnabled(unitId) {
+		return !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;
 	}
@@ -8620,7 +8753,7 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		try {
 			this._stateChangeManager.flushPendingChanges(unitId);
 			const result = this._paste(doc, unitId);
-			if (result && !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;
@@ -8844,7 +8977,11 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		this._clipboardHooks.push(hook);
 		return 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) {
@@ -11550,31 +11687,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: 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: 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";
@@ -13790,6 +13902,10 @@ let DocRenderController = class DocRenderController extends RxDisposable {
 				} finally {
 					this._docLayoutExecutorService.recordHydrationDuration(this._context.unitId, Tools.now() - hydrationStartedAt);
 				}
+				this._textSelectionManagerService.refreshSelection({
+					unitId: this._context.unitId,
+					subUnitId: this._context.unitId
+				}, false);
 				this._markDocumentRenderDirty();
 			}
 		}
@@ -14277,6 +14393,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
@@ -14334,8 +14452,8 @@ const CoreHeaderFooterCommand = {
 		let resolvedCreateType = createType;
 		if (headerFooterProps != null) Object.keys(headerFooterProps).forEach((key) => {
 			const value = headerFooterProps[key];
-			if (resolvedCreateType == null && key === "useFirstPageHeaderFooter" && value === BooleanNumber.TRUE && !headerFooterConfig.firstPageHeaderId) resolvedCreateType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.FIRST_PAGE_HEADER : HeaderFooterType.FIRST_PAGE_FOOTER;
-			else if (resolvedCreateType == null && key === "evenAndOddHeaders" && value === BooleanNumber.TRUE && !headerFooterConfig.evenPageHeaderId) resolvedCreateType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.EVEN_PAGE_HEADER : HeaderFooterType.EVEN_PAGE_FOOTER;
+			if (resolvedCreateType == null && key === "useFirstPageHeaderFooter" && value === BooleanNumber.TRUE && !(editArea === DocumentEditArea.HEADER ? headerFooterConfig.firstPageHeaderId : headerFooterConfig.firstPageFooterId)) resolvedCreateType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.FIRST_PAGE_HEADER : HeaderFooterType.FIRST_PAGE_FOOTER;
+			else if (resolvedCreateType == null && key === "evenAndOddHeaders" && value === BooleanNumber.TRUE && !(editArea === DocumentEditArea.HEADER ? headerFooterConfig.evenPageHeaderId : headerFooterConfig.evenPageFooterId)) resolvedCreateType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.EVEN_PAGE_HEADER : HeaderFooterType.EVEN_PAGE_FOOTER;
 		});
 		return commandService.syncExecuteCommand(CreateHeaderFooterCommand.id, {
 			unitId,
@@ -14350,8 +14468,8 @@ const CoreHeaderFooterCommand = {
 const OpenHeaderFooterPanelCommand = {
 	id: "doc.command.open-header-footer-panel",
 	type: CommandType.COMMAND,
-	handler: async (accessor, _params) => {
-		var _skeleton$getSkeleton;
+	handler: async (accessor, params) => {
+		var _skeleton$getSkeleton, _docDataModel$getSelf;
 		const commandService = accessor.get(ICommandService);
 		const instanceService = accessor.get(IUniverInstanceService);
 		const renderManagerService = accessor.get(IRenderManagerService);
@@ -14368,8 +14486,9 @@ const OpenHeaderFooterPanelCommand = {
 		const currentPage = selectionRenderService.getSegmentPage();
 		const pageNumber = currentPage >= 0 && currentPage < pages.length ? currentPage : 0;
 		const page = pages[pageNumber];
-		viewModel.setEditArea(DocumentEditArea.HEADER);
-		const { createType, headerFooterId, sectionId } = getHeaderFooterTarget(viewModel, DocumentEditArea.HEADER, pageNumber, page);
+		const editArea = (params === null || params === void 0 ? void 0 : params.editArea) ?? DocumentEditArea.HEADER;
+		viewModel.setEditArea(editArea);
+		const { createType, headerFooterId, sectionId } = getHeaderFooterTarget(viewModel, editArea, pageNumber, page);
 		selectionRenderService.setSegmentPage(pageNumber);
 		if (createType != null) {
 			const segmentId = generateRandomId(6);
@@ -14386,6 +14505,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(DocSelectionManagerService).replaceDocRanges([{
+			startOffset: offset,
+			endOffset: offset,
+			collapsed: true,
+			segmentId,
+			segmentPage: pageNumber
+		}], {
+			unitId,
+			subUnitId: unitId
+		});
+		selectionRenderService.focus();
 		return commandService.executeCommand(SidebarDocHeaderFooterPanelOperation.id, { value: "open" });
 	}
 };
@@ -14428,7 +14562,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: 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(IUniverInstanceService).getUnit(params.unitId, UniverInstanceType.UNIVER_DOC);
+		const active = accessor.get(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 (!canEditDocumentTargets(accessor.get(IPermissionService), params.unitId, 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 === CustomRangeType.FIELD && ((_range$properties = range.properties) === null || _range$properties === void 0 ? void 0 : _range$properties.locked) === BooleanNumber.TRUE && selection.startOffset <= range.endIndex && selection.endOffset > range.startIndex;
+		})) return false;
+		const locale = LOCALE_META[accessor.get(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(IRenderManagerService).getRenderUnitById(params.unitId)) === null || _accessor$get$getRend === void 0 ? void 0 : _accessor$get$getRend.with(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 ? `${DataStreamTreeTokenType.CUSTOM_RANGE_START}${properties.cachedResult}${DataStreamTreeTokenType.CUSTOM_RANGE_END}` : properties.cachedResult;
+		const style = accessor.get(DocMenuStyleService);
+		const textRun = getTextRunForSelection(body, selection, style.getDefaultStyle(), style.getStyleCache(), false);
+		return accessor.get(ICommandService).syncExecuteCommand(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: generateRandomId(),
+					rangeType: 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: CommandType.COMMAND,
+	handler(accessor, params) {
+		if (!params) return false;
+		const model = accessor.get(IUniverInstanceService).getUnit(params.unitId, 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(IPermissionService);
+		const locale = LOCALE_META[accessor.get(LocaleService).getCurrentLocale()].tag;
+		const now = /* @__PURE__ */ new Date();
+		const selections = accessor.get(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)) && canEditDocumentTargets(permissions, params.unitId, getDocumentEditTargetObjectIds(model, segmentId, {
+				startOffset: field.startIndex,
+				endOffset: field.endIndex + 1
+			})));
+			if (textX.length) actions = JSONX.compose(actions, JSONX.getInstance().editOp(textX, getRichTextEditPath(model, segmentId)));
+		}
+		if (JSONX.isNoop(actions)) return true;
+		if (!params.onOpen) accessor.get(DocStateChangeManagerService).flushPendingChanges(params.unitId);
+		return Boolean(accessor.get(ICommandService).syncExecuteCommand(RichTextEditingMutation.id, {
+			unitId: params.unitId,
+			actions,
+			textRanges: transformDocumentTextRanges(actions, [...selections]),
+			noHistory: params.onOpen === true,
+			debounce: false,
+			trigger: RefreshHeaderFooterFieldsCommand.id
+		}));
+	}
+};
+const UpdateSelectedDocFieldsCommand = {
+	id: "doc.command.update-selected-fields",
+	type: CommandType.COMMAND,
+	handler(accessor) {
+		const model = accessor.get(IUniverInstanceService).getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
+		if (!model) return false;
+		return accessor.get(ICommandService).syncExecuteCommand(RefreshHeaderFooterFieldsCommand.id, {
+			unitId: model.getUnitId(),
+			selectionOnly: true
+		});
+	}
+};
+function refreshDateTimeFields(body, locale, date, canEdit) {
+	const textX = new 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 !== CustomRangeType.FIELD || (properties === null || properties === void 0 ? void 0 : properties.locked) === 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 = `${DataStreamTreeTokenType.CUSTOM_RANGE_START}${value}${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(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;
 	}
 };
@@ -15057,8 +15438,12 @@ let DocEventManagerService = class DocEventManagerService extends Disposable {
 	}
 	_initPointer() {
 		let preCursor = CURSOR_TYPE.TEXT;
+		let pointing = false;
 		this.disposeWithMe(this.hoverCustomRanges$.subscribe((ranges) => {
-			if (ranges.length) {
+			const nextPointing = ranges.some(({ range }) => range.rangeType !== CustomRangeType.FIELD);
+			if (nextPointing === pointing) return;
+			pointing = nextPointing;
+			if (pointing) {
 				preCursor = this._context.scene.getCursor();
 				this._context.scene.setCursor(CURSOR_TYPE.POINTER);
 			} else this._context.scene.setCursor(preCursor);
@@ -15181,6 +15566,10 @@ let DocEventManagerService = class DocEventManagerService extends Disposable {
 		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);
@@ -15726,132 +16115,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 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, ICommandService), __decorateParam(1, Inject(ISidebarService))], DocParagraphSettingController);
-
-//#endregion
-//#region src/commands/operations/doc-paragraph-setting-panel.operation.ts
-const DocParagraphSettingPanelOperation = {
-	id: "sidebar.operation.doc-paragraph-setting-panel",
-	type: 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 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, Inject(ISidebarService)), __decorateParam(1, Inject(DocSelectionManagerService))], DocSectionSettingController);
-
-//#endregion
-//#region src/commands/operations/doc-section-setting-panel.operation.ts
-const DocSectionSettingPanelOperation = {
-	id: "sidebar.operation.doc-section-setting-panel",
-	type: CommandType.OPERATION,
-	handler: (accessor) => {
-		accessor.get(DocSectionSettingController).openPanel();
-		return true;
+//#region src/commands/commands/insert-special-character.command.ts
+const InsertSpecialCharacterCommand = {
+	id: "doc.command.insert-special-character",
+	type: 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(ICommandService);
+		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const docMenuStyleService = accessor.get(DocMenuStyleService);
+		const docDataModel = univerInstanceService.getCurrentUnitOfType(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(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
+		});
 	}
 };
 
@@ -16285,54 +16592,6 @@ const DocOpenPageSettingCommand = {
 	}
 };
 
-//#endregion
-//#region src/commands/commands/insert-special-character.command.ts
-const InsertSpecialCharacterCommand = {
-	id: "doc.command.insert-special-character",
-	type: 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(ICommandService);
-		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const docMenuStyleService = accessor.get(DocMenuStyleService);
-		const docDataModel = univerInstanceService.getCurrentUnitOfType(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(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
 /**
@@ -17672,22 +17931,226 @@ function getParagraphStyleAtCursor(accessor) {
 		if (startOffset > prevIndex && startOffset <= startIndex) return paragraph;
 		prevIndex = startIndex;
 	}
-	return null;
-}
-function isInjectorDisposedError(error) {
-	if (!(error instanceof Error)) return false;
-	return error.name === "InjectorAlreadyDisposedError" || error.message.includes("Injector cannot be accessed after it was disposed");
-}
-function PageSettingMenuItemFactory(accessor) {
-	return {
-		id: DocOpenPageSettingCommand.id,
-		type: MenuItemType.BUTTON,
-		icon: "DocSettingIcon",
-		tooltip: "docs-ui.toolbar.pageSetup",
-		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
-		disabled$: disableMenuWithoutDocumentEditPermission(accessor)
-	};
-}
+	return null;
+}
+function isInjectorDisposedError(error) {
+	if (!(error instanceof Error)) return false;
+	return error.name === "InjectorAlreadyDisposedError" || error.message.includes("Injector cannot be accessed after it was disposed");
+}
+function PageSettingMenuItemFactory(accessor) {
+	return {
+		id: DocOpenPageSettingCommand.id,
+		type: MenuItemType.BUTTON,
+		icon: "DocSettingIcon",
+		tooltip: "docs-ui.toolbar.pageSetup",
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
+		disabled$: disableMenuWithoutDocumentEditPermission(accessor)
+	};
+}
+
+//#endregion
+//#region src/menu/header-footer-ribbon.ts
+const headerFooterRibbonSchema = {
+	[ContextMenuPosition.MAIN_AREA]: { [ContextMenuGroup.FORMAT]: { [UpdateSelectedDocFieldsCommand.id]: {
+		order: 1,
+		menuItemFactory: (accessor) => {
+			const instances = accessor.get(IUniverInstanceService);
+			const selections = accessor.get(DocSelectionManagerService);
+			return {
+				id: UpdateSelectedDocFieldsCommand.id,
+				type: MenuItemType.BUTTON,
+				title: "docs-ui.headerFooter.refreshFields",
+				disabled$: disableMenuWithoutDocumentUnitPermission(accessor, UnitAction.Edit),
+				hidden$: combineLatest([instances.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC), selections.textSelection$.pipe(startWith(null))]).pipe(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 === CustomRangeType.FIELD && selection.startOffset <= field.endIndex && selection.endOffset > field.startIndex);
+				})))
+			};
+		}
+	} } },
+	[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: 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: 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 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, ICommandService), __decorateParam(1, Inject(ISidebarService))], DocParagraphSettingController);
+
+//#endregion
+//#region src/commands/operations/doc-paragraph-setting-panel.operation.ts
+const DocParagraphSettingPanelOperation = {
+	id: "sidebar.operation.doc-paragraph-setting-panel",
+	type: 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 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, Inject(ISidebarService)), __decorateParam(1, Inject(DocSelectionManagerService))], DocSectionSettingController);
+
+//#endregion
+//#region src/commands/operations/doc-section-setting-panel.operation.ts
+const DocSectionSettingPanelOperation = {
+	id: "sidebar.operation.doc-section-setting-panel",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		accessor.get(DocSectionSettingController).openPanel();
+		return true;
+	}
+};
 
 //#endregion
 //#region src/menu/context-menu.ts
@@ -17957,13 +18420,20 @@ function PasteSpecialMenuFactory(accessor) {
 		id: DocPasteSpecialCommand.id,
 		type: MenuItemType.SELECTOR,
 		icon: "DocPasteOptionsIcon",
-		title: "docs-ui.pasteOptions.title",
-		tooltip: "docs-ui.pasteOptions.title",
+		title: "docs-ui.pasteOptions.special",
+		tooltip: "docs-ui.pasteOptions.special",
 		selections: DOC_PASTE_OPTIONS.map((option) => ({ ...option })),
 		disabled$: disableMenuWithoutDocumentUnitPermission(accessor, UnitAction.Edit),
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
 	};
 }
+function PasteRibbonMenuFactory(accessor) {
+	return {
+		...PasteSpecialMenuFactory(accessor),
+		title: "docs-ui.rightClick.paste",
+		hidden$: combineLatest([getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), accessor.get(IContextService).subscribeContextValue$(FOCUSING_SHAPE_TEXT_EDITOR).pipe(startWith(false))]).pipe(map(([hidden, editing]) => hidden || editing))
+	};
+}
 
 //#endregion
 //#region src/views/paragraph-menu/theme-color.ts
@@ -18566,28 +19036,26 @@ const floatToolbarMenuSchema = { [FLOAT_TOOLBAR_MENU_POSITION]: { [FLOAT_TEXT_ST
 } } };
 const menuSchema = {
 	...floatToolbarMenuSchema,
-	[RibbonStartGroup.OTHERS]: {
-		[DocPasteSpecialCommand.id]: {
-			order: -1,
-			gridLayout: {
-				row: 1,
-				column: 2,
-				rowSpan: 2,
-				showLabel: true
-			},
-			menuItemFactory: PasteSpecialMenuFactory
+	[RibbonStartGroup.HISTORY]: { [DocPasteSpecialCommand.id]: {
+		order: 4,
+		gridLayout: {
+			row: 1,
+			column: 3,
+			rowSpan: 2,
+			showLabel: true
 		},
-		[OpenDocPermissionPanelOperation.id]: {
-			order: 0,
-			gridLayout: {
-				row: 1,
-				column: 1,
-				rowSpan: 2,
-				showLabel: true
-			},
-			menuItemFactory: DocPermissionMenuItemFactory
-		}
-	},
+		menuItemFactory: PasteRibbonMenuFactory
+	} },
+	[RibbonStartGroup.OTHERS]: { [OpenDocPermissionPanelOperation.id]: {
+		order: 0,
+		gridLayout: {
+			row: 1,
+			column: 1,
+			rowSpan: 2,
+			showLabel: true
+		},
+		menuItemFactory: DocPermissionMenuItemFactory
+	} },
 	[RibbonStartGroup.FORMAT]: {
 		[SetInlineFormatBoldCommand.id]: {
 			order: 0,
@@ -18835,16 +19303,18 @@ const menuSchema = {
 			[DocPasteCommand.id]: {
 				order: 2,
 				menuItemFactory: PasteMenuFactory
-			},
+			}
+		},
+		[ContextMenuGroup.FORMAT]: {
 			[DocPasteSpecialCommand.id]: {
-				order: 3,
+				order: -1,
 				menuItemFactory: PasteSpecialMenuFactory
+			},
+			[DeleteLeftCommand.id]: {
+				order: 0,
+				menuItemFactory: DeleteMenuFactory
 			}
 		},
-		[ContextMenuGroup.FORMAT]: { [DeleteLeftCommand.id]: {
-			order: 0,
-			menuItemFactory: DeleteMenuFactory
-		} },
 		[ContextMenuGroup.LAYOUT]: {
 			[DocParagraphSettingPanelOperation.id]: {
 				order: 0,
@@ -19439,6 +19909,9 @@ const menuSchema = {
 
 //#endregion
 //#region src/shortcuts/utils.ts
+function whenTextEditorFocused(contextService) {
+	return contextService.getContextValue(FOCUSING_UNIVER_EDITOR) && !contextService.getContextValue(FOCUSING_COMMON_DRAWINGS) && (contextService.getContextValue(FOCUSING_DOC) || contextService.getContextValue(EDITOR_ACTIVATED) || contextService.getContextValue(FOCUSING_FX_BAR_EDITOR));
+}
 function whenDocAndEditorFocused(contextService) {
 	return contextService.getContextValue(FOCUSING_DOC) && contextService.getContextValue(FOCUSING_UNIVER_EDITOR) && !contextService.getContextValue(FOCUSING_COMMON_DRAWINGS);
 }
@@ -19453,6 +19926,11 @@ const TabShortCut = {
 	binding: KeyCode.TAB,
 	preconditions: whenDocAndEditorFocused
 };
+const UpdateDocFieldsShortcut = {
+	id: UpdateSelectedDocFieldsCommand.id,
+	binding: KeyCode.F9,
+	preconditions: whenDocAndEditorFocused
+};
 const ShiftTabShortCut = {
 	id: TabCommand.id,
 	binding: KeyCode.TAB | MetaKeys.SHIFT,
@@ -20462,21 +20940,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 Disposable {
 	constructor(_injector, _commandService, _layoutService, _menuManagerService, _uiPartsService, _univerInstanceService, _shortcutService, _configService, _embedInteractionBoundaryService, _embedRuntimeFocusCoordinator) {
 		super();
@@ -20498,6 +20961,7 @@ let DocUIController = class DocUIController extends Disposable {
 	_initMenus() {
 		this._menuManagerService.appendRootMenu(floatToolbarMenuSchema);
 		this._menuManagerService.mergeMenu(menuSchema);
+		this._menuManagerService.mergeMenu(headerFooterRibbonSchema);
 	}
 	_initShortCut() {
 		[
@@ -20513,7 +20977,8 @@ let DocUIController = class DocUIController extends Disposable {
 			AlignLeftShortCut,
 			OrderListShortCut,
 			BulletListShortCut,
-			TabShortCut
+			TabShortCut,
+			UpdateDocFieldsShortcut
 		].forEach((shortcut) => {
 			this.disposeWithMe(this._shortcutService.registerShortcut(shortcut));
 		});
@@ -20522,6 +20987,7 @@ let DocUIController = class DocUIController extends Disposable {
 		this._initMenus();
 		this._initFocusHandler();
 		this._initCommands();
+		this._initDateTimeFields();
 		this._initUiParts();
 		this._initShortCut();
 	}
@@ -20530,10 +20996,25 @@ let DocUIController = class DocUIController extends 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$(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(UniverInstanceType.UNIVER_DOC, (unitId) => {
 			if (this._shouldPreserveEmbedFocus(unitId)) return;
@@ -20831,7 +21312,7 @@ function resolveDocsCustomBlockRenderViewport(params) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-ui";
-var version = "1.0.2";
+var version = "1.0.4";
 
 //#endregion
 //#region src/commands/commands/doc-paragraph-setting.command.ts
@@ -21078,8 +21559,8 @@ var HeaderFooterContentCover = class extends 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);
@@ -21537,10 +22018,11 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 		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;
+			if (this._deferUnmaterializedCursorMove(docDataModel, skeleton, nextOffset, normalizedSegmentId, () => this._handleShiftMoveSelection(direction, granularity))) return;
 			const normalizedNextOffset = this._normalizeRenderableCursorOffset(skeleton, body.dataStream, customRanges, nextOffset, direction, normalizedSegmentId, normalizedSegmentPage);
 			if (normalizedNextOffset == null || normalizedNextOffset === focusOffset) return;
 			this._textSelectionManagerService.replaceDocRanges([{
@@ -21608,7 +22090,7 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 		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) {
@@ -22231,26 +22713,33 @@ function DocPasteOptions() {
 	const commandService = useDependency(ICommandService);
 	const localeService = useDependency(LocaleService);
 	const layoutService = useDependency(ILayoutService);
+	const editorService = useDependency(IEditorService);
 	const state = useObservable(clipboard.pasteOptions$, null);
 	const [busy, setBusy] = useState(false);
 	const [open, setOpen] = 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__ */ jsx(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) => ({
@@ -22262,6 +22751,7 @@ function DocPasteOptions() {
 			onSelect: () => changeMode(option.value)
 		})),
 		children: /* @__PURE__ */ jsxs(Button, {
+			"data-u-editor-interaction-boundary": "true",
 			size: "small",
 			disabled: busy,
 			"aria-label": localeService.t("docs-ui.pasteOptions.title"),
@@ -22270,7 +22760,7 @@ function DocPasteOptions() {
 			onKeyDown: (event) => {
 				if (event.key === "Escape") {
 					clipboard.dismissPasteOptions();
-					layoutService.focus();
+					focusEditor();
 				}
 			},
 			className: "univer-shadow-sm",
@@ -22529,28 +23019,37 @@ function useHeaderFooterOptions(unitId) {
 			page
 		};
 	};
-	const [options, setOptions] = 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) ?? BooleanNumber.FALSE,
-			evenAndOddHeaders: (config === null || config === void 0 ? void 0 : config.evenAndOddHeaders) ?? BooleanNumber.FALSE
+	const [, refresh] = useReducer((revision) => revision + 1, 0);
+	useEffect(() => {
+		const commandListener = commandService.onCommandExecuted((command) => {
+			var _command$params;
+			if (command.id === 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) ?? BooleanNumber.FALSE,
+		evenAndOddHeaders: (config === null || config === void 0 ? void 0 : config.evenAndOddHeaders) ?? BooleanNumber.FALSE
+	};
 	const headerFooterKind = ((_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.with(DocSkeletonManagerService)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.getViewModel()) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.getEditArea()) === DocumentEditArea.FOOTER ? "footer" : "header";
 	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 = getSectionHeaderFooterReferenceKey(headerFooterKind, variant);
 	const canLinkToPrevious = ((sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.sectionIndex) ?? -1) > 0;
-	const [linkedToPrevious, setLinkedToPrevious] = 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 ? BooleanNumber.TRUE : 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(DocSkeletonManagerService);
@@ -22575,7 +23074,7 @@ function useHeaderFooterOptions(unitId) {
 		if (needCreateHeaderFooter) {
 			const segmentId = generateRandomId(6);
 			if (needChangeSegmentId) docSelectionRenderService.setSegment(segmentId);
-			commandService.executeCommand(CoreHeaderFooterCommandId, {
+			await commandService.executeCommand(CoreHeaderFooterCommandId, {
 				unitId,
 				segmentId,
 				headerFooterProps: { [type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE },
@@ -22589,7 +23088,7 @@ function useHeaderFooterOptions(unitId) {
 				[type]: val ? BooleanNumber.TRUE : 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 ? BooleanNumber.TRUE : BooleanNumber.FALSE },
 				sectionId: sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.sectionId
@@ -22598,21 +23097,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;
@@ -22631,7 +23125,6 @@ function useHeaderFooterOptions(unitId) {
 			linkedToPrevious: linked,
 			...linked ? {} : { segmentId }
 		})) return;
-		setLinkedToPrevious(linked);
 		docSelectionRenderService.setSegment(linked ? previousSegmentId ?? "" : segmentId);
 		layoutService.focus();
 	};
@@ -24114,25 +24607,30 @@ const mobileMenuSchema = {
 			menuItemFactory: SelectAllMenuFactory
 		}
 	} },
-	[DOC_CARET_MENU_ID]: { [ContextMenuGroup.QUICK]: {
-		quickLayout: "tile",
-		[DocPasteCommand.id]: {
-			order: 0,
-			menuItemFactory: PasteMenuFactory
-		},
-		[DocPasteSpecialCommand.id]: {
-			order: .5,
-			menuItemFactory: PasteSpecialMenuFactory
+	[DOC_CARET_MENU_ID]: {
+		[ContextMenuGroup.QUICK]: {
+			quickLayout: "tile",
+			[DocPasteCommand.id]: {
+				order: 0,
+				menuItemFactory: PasteMenuFactory
+			},
+			[DocSelectWordCommand.id]: {
+				order: 1,
+				menuItemFactory: SelectWordMenuFactory
+			},
+			[DocSelectAllCommand.id]: {
+				order: 2,
+				menuItemFactory: SelectAllMenuFactory
+			}
 		},
-		[DocSelectWordCommand.id]: {
+		[ContextMenuGroup.FORMAT]: {
 			order: 1,
-			menuItemFactory: SelectWordMenuFactory
-		},
-		[DocSelectAllCommand.id]: {
-			order: 2,
-			menuItemFactory: SelectAllMenuFactory
+			[DocPasteSpecialCommand.id]: {
+				order: 0,
+				menuItemFactory: PasteSpecialMenuFactory
+			}
 		}
-	} }
+	}
 };
 
 //#endregion
@@ -25328,9 +25826,9 @@ let DocPasteOptionsRenderController = class DocPasteOptionsRenderController exte
 		this._context = _context;
 		this._clipboard = _clipboard;
 		_defineProperty(this, "_popup", void 0);
-		if (isInternalEditorID(_context.unitId)) return;
 		const mobile = contextService.getContextValue(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 (![
@@ -25343,12 +25841,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();
@@ -25368,7 +25871,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();
 		});
 	}
 };
@@ -26405,8 +26908,8 @@ var DocPrintInterceptorService = class extends 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;
@@ -27407,6 +27910,319 @@ UniverDocsMobileUIPlugin = __decorate([
 	__decorateParam(4, IConfigService)
 ], UniverDocsMobileUIPlugin);
 
+//#endregion
+//#region src/views/header-footer/panel/DocHeaderFooterFields.tsx
+function DocHeaderFooterFields({ unitId, disabled }) {
+	const localeService = useDependency(LocaleService);
+	useObservable(localeService.currentLocale$);
+	const commands = useDependency(ICommandService);
+	const layout = useDependency(ILayoutService);
+	const shortcuts = useDependency(IShortcutService);
+	const selections = useDependency(DocSelectionManagerService);
+	const instances = useDependency(IUniverInstanceService);
+	const [target, setTarget] = useState(null);
+	const [format, setFormat] = useState("short");
+	const [automatic, setAutomatic] = useState(true);
+	const [error, setError] = useState(false);
+	const [previewDate, setPreviewDate] = useState(() => /* @__PURE__ */ new Date());
+	const locale = LOCALE_META[localeService.getCurrentLocale()].tag;
+	const dialogOpen = target !== null;
+	const dialogFocusRef = useRef(null);
+	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
+	]);
+	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__ */ jsxs("div", {
+		className: "univer-flex univer-flex-col univer-gap-1 univer-text-xs",
+		children: [
+			/* @__PURE__ */ jsx(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__ */ jsxs(Button, {
+					className: "univer-justify-start",
+					"data-u-command": InsertHeaderFooterFieldCommand.id,
+					size: "small",
+					variant: "text",
+					disabled,
+					onMouseDown: (event) => event.preventDefault(),
+					children: [
+						/* @__PURE__ */ jsx(NumberIcon, { "aria-hidden": "true" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "univer-flex-1 univer-text-start",
+							children: localeService.t("docs-ui.headerFooter.pageNumber")
+						}),
+						/* @__PURE__ */ jsx(MoreDownIcon, { "aria-hidden": "true" })
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				className: "univer-justify-start",
+				"data-u-command": InsertHeaderFooterFieldCommand.id,
+				size: "small",
+				variant: "text",
+				disabled,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: openDateTime,
+				children: [/* @__PURE__ */ jsx(CalendarIcon, { "aria-hidden": "true" }), localeService.t("docs-ui.headerFooter.dateTime")]
+			}),
+			/* @__PURE__ */ jsx(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__ */ jsxs("div", {
+					className: "univer-flex univer-flex-col univer-gap-4",
+					children: [
+						/* @__PURE__ */ jsx(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__ */ jsxs(Button, {
+								"aria-label": localeService.t("docs-ui.headerFooter.dateTime"),
+								className: selectClassName,
+								"data-u-comp": "select",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "univer-flex-1 univer-truncate univer-text-start",
+									children: createDateTimeField(format, locale, previewDate).cachedResult
+								}), /* @__PURE__ */ jsx(MoreDownIcon, { "aria-hidden": "true" })]
+							})
+						}),
+						/* @__PURE__ */ jsx(Checkbox, {
+							checked: automatic,
+							onChange: (value) => setAutomatic(Boolean(value)),
+							children: localeService.t("docs-ui.headerFooter.updateAutomatically")
+						}),
+						error && /* @__PURE__ */ 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 = useDependency(IUniverInstanceService);
+	const localeService = useDependency(LocaleService);
+	useObservable(localeService.currentLocale$);
+	const document = useObservable(() => instances.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC), void 0, false, [instances]);
+	const containerRef = useRef(null);
+	const [compact, setCompact] = useState(false);
+	const { kind } = props;
+	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__ */ jsx(HeaderFooterRibbonControl, {
+		...props,
+		unitId: document.getUnitId()
+	}, document.getUnitId());
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		"data-u-command": OpenHeaderFooterPanelCommand.id,
+		className: "univer-flex univer-items-center univer-whitespace-nowrap",
+		children: compact && kind !== "insertion" ? /* @__PURE__ */ jsx(DropdownMenu, {
+			items: [{
+				type: "custom",
+				className: "univer-p-2",
+				children: content
+			}],
+			children: /* @__PURE__ */ jsx(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 = useDependency(LocaleService);
+	const commandService = useDependency(ICommandService);
+	const renders = useDependency(IRenderManagerService);
+	const permissionService = useDependency(IPermissionService);
+	useObservable(permissionService.permissionPointUpdate$);
+	const instances = useDependency(IUniverInstanceService);
+	const disabled = Boolean((_instances$getUnit = instances.getUnit(unitId)) === null || _instances$getUnit === void 0 ? void 0 : _instances$getUnit.getSnapshot().disabled) || !getDocumentPermissionValue(permissionService, unitId, unitId, 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(DocSkeletonManagerService).getViewModel().getEditArea();
+	if (kind === "insertion") return /* @__PURE__ */ jsx(DocHeaderFooterFields, {
+		unitId,
+		disabled
+	});
+	if (kind === "navigation") return /* @__PURE__ */ 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__ */ jsx(Button, {
+				"data-u-command": OpenHeaderFooterPanelCommand.id,
+				size: "small",
+				variant: "text",
+				disabled: disabled || area === DocumentEditArea.HEADER,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: () => commandService.executeCommand(OpenHeaderFooterPanelCommand.id, { editArea: DocumentEditArea.HEADER }),
+				children: localeService.t("docs-ui.headerFooter.goToHeader")
+			}),
+			/* @__PURE__ */ jsx(Checkbox, {
+				disabled: disabled || !canLinkToPrevious,
+				checked: linkedToPrevious,
+				onChange: (value) => handleLinkToPreviousChange(Boolean(value)),
+				children: localeService.t("docs-ui.headerFooter.linkToPrevious")
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"data-u-command": OpenHeaderFooterPanelCommand.id,
+				size: "small",
+				variant: "text",
+				disabled: disabled || area === DocumentEditArea.FOOTER,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: () => commandService.executeCommand(OpenHeaderFooterPanelCommand.id, { editArea: DocumentEditArea.FOOTER }),
+				children: localeService.t("docs-ui.headerFooter.goToFooter")
+			})
+		]
+	});
+	if (kind === "options") return /* @__PURE__ */ jsxs("div", {
+		className: "univer-flex univer-flex-col univer-gap-2 univer-text-start univer-text-xs",
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			disabled,
+			checked: options.useFirstPageHeaderFooter === BooleanNumber.TRUE,
+			onChange: (value) => handleCheckboxChange(Boolean(value), "useFirstPageHeaderFooter"),
+			children: localeService.t("docs-ui.headerFooter.firstPageCheckBox")
+		}), /* @__PURE__ */ jsx(Checkbox, {
+			disabled,
+			checked: options.evenAndOddHeaders === BooleanNumber.TRUE,
+			onChange: (value) => handleCheckboxChange(Boolean(value), "evenAndOddHeaders"),
+			children: localeService.t("docs-ui.headerFooter.oddEvenCheckBox")
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-flex univer-flex-col univer-gap-1 univer-text-start univer-text-xs",
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "univer-grid univer-grid-cols-[1fr_5rem] univer-items-center univer-gap-x-2",
+			children: [/* @__PURE__ */ jsx("span", { children: localeService.t("docs-ui.headerFooter.headerTopMargin") }), /* @__PURE__ */ jsx(InputNumber, {
+				disabled,
+				min: 0,
+				max: 200,
+				precision: 1,
+				value: options.marginHeader,
+				onChange: (value) => handleMarginChange(value ?? 0, "marginHeader")
+			})]
+		}), /* @__PURE__ */ jsxs("label", {
+			className: "univer-grid univer-grid-cols-[1fr_5rem] univer-items-center univer-gap-x-2",
+			children: [/* @__PURE__ */ jsx("span", { children: localeService.t("docs-ui.headerFooter.footerBottomMargin") }), /* @__PURE__ */ jsx(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
 /**
@@ -29202,6 +30018,7 @@ let ComponentsController = class ComponentsController extends Disposable {
 			BoldIcon,
 			CopyDoubleIcon,
 			ColumnIcon,
+			CloseIcon,
 			CutIcon,
 			DeleteColumnDoubleIcon,
 			DeleteIcon,
@@ -29280,7 +30097,8 @@ let ComponentsController = class ComponentsController extends Disposable {
 		}));
 	}
 	_registerComponents() {
-		if (!this._componentManager.get("COMPONENT_DOC_HEADER_FOOTER_PANEL")) this.disposeWithMe(this._componentManager.register(COMPONENT_DOC_HEADER_FOOTER_PANEL, DocHeaderFooterPanel));
+		this.disposeWithMe(this._componentManager.register(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));
 		[
@@ -29298,6 +30116,43 @@ let ComponentsController = class ComponentsController extends Disposable {
 };
 ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
 
+//#endregion
+//#region src/controllers/doc-header-footer-ribbon.controller.ts
+let DocHeaderFooterRibbonController = class DocHeaderFooterRibbonController extends 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(combineLatest([skeletonManager.getViewModel().editAreaChange$, this._instanceService.focused$]).pipe(map(([area, focused]) => focused === this._context.unitId && this._context.unit.getDocumentStyle().documentFlavor === DocumentFlavor.TRADITIONAL && (area === DocumentEditArea.HEADER || area === DocumentEditArea.FOOTER)), 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 !== 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(DocSkeletonManagerService);
+		const area = manager === null || manager === void 0 ? void 0 : manager.getViewModel().getEditArea();
+		return (area === DocumentEditArea.HEADER || area === DocumentEditArea.FOOTER) && (manager === null || manager === void 0 ? void 0 : manager.getViewModel().getDataModel().getDocumentStyle().documentFlavor) === DocumentFlavor.TRADITIONAL;
+	}
+	dispose() {
+		if (this._visible && !this._focusedDocumentEditsHeaderFooter()) this._ribbonService.hideContextualTab(DOC_HEADER_FOOTER_RIBBON_TAB);
+		super.dispose();
+	}
+};
+DocHeaderFooterRibbonController = __decorate([
+	__decorateParam(1, Inject(DocSkeletonManagerService)),
+	__decorateParam(2, IUniverInstanceService),
+	__decorateParam(3, IRibbonService),
+	__decorateParam(4, IRenderManagerService)
+], DocHeaderFooterRibbonController);
+
 //#endregion
 //#region src/controllers/format-painter.controller.ts
 let DocFormatPainterController = class DocFormatPainterController extends Disposable {
@@ -29365,6 +30220,83 @@ DocFormatPainterController = __decorate([
 	__decorateParam(7, ICommandService)
 ], DocFormatPainterController);
 
+//#endregion
+//#region src/controllers/render-controllers/doc-field.render-controller.ts
+let DocFieldRenderController = class DocFieldRenderController extends 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 === 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 === 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 !== CustomRangeType.FIELD) continue;
+			if (segmentId) {
+				if (area === DocumentEditArea.BODY || segmentPageIndex !== pageIndex || !(activeSegments === null || activeSegments === void 0 ? void 0 : activeSegments[segmentId])) continue;
+			} else if (area !== 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 === 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, Inject(DocEventManagerService)),
+	__decorateParam(2, Inject(DocSelectionManagerService)),
+	__decorateParam(3, Inject(ThemeService)),
+	__decorateParam(4, IUniverInstanceService)
+], DocFieldRenderController);
+
 //#endregion
 //#region src/controllers/render-controllers/doc-selection-render.controller.ts
 let DocSelectionRenderController = class DocSelectionRenderController extends Disposable {
@@ -29689,6 +30621,32 @@ const CloseHeaderFooterShortcut = {
 	preconditions: whenDocAndEditorFocused,
 	binding: KeyCode.ESC
 };
+const DeleteWordLeftShortcut = {
+	id: DeleteLeftCommand.id,
+	preconditions: whenTextEditorFocused,
+	binding: KeyCode.BACKSPACE | MetaKeys.CTRL_COMMAND,
+	mac: KeyCode.BACKSPACE | MetaKeys.ALT,
+	staticParameters: { granularity: "word" }
+};
+const DeleteWordRightShortcut = {
+	id: DeleteRightCommand.id,
+	preconditions: whenTextEditorFocused,
+	mac: KeyCode.DELETE | MetaKeys.ALT,
+	staticParameters: { granularity: "word" }
+};
+const DeleteLineStartShortcut = {
+	id: DeleteLeftCommand.id,
+	preconditions: whenTextEditorFocused,
+	mac: KeyCode.BACKSPACE | MetaKeys.CTRL_COMMAND,
+	staticParameters: { granularity: "line" }
+};
+const DeleteLineEndShortcut = {
+	id: DeleteRightCommand.id,
+	preconditions: whenTextEditorFocused,
+	binding: KeyCode.DELETE | MetaKeys.CTRL_COMMAND,
+	mac: KeyCode.DELETE | MetaKeys.MAC_CTRL,
+	staticParameters: { granularity: "line" }
+};
 
 //#endregion
 //#region src/shortcuts/cursor.shortcut.ts
@@ -29699,7 +30657,7 @@ function moveCursorShortcut(direction, granularity, binding, mac = binding, win
 		mac,
 		win,
 		linux,
-		preconditions: whenDocAndEditorFocused,
+		preconditions: whenTextEditorFocused,
 		staticParameters: {
 			direction,
 			granularity
@@ -29713,7 +30671,7 @@ function moveSelectionShortcut(direction, granularity, binding, mac = binding, w
 		mac,
 		win,
 		linux,
-		preconditions: whenDocAndEditorFocused,
+		preconditions: whenTextEditorFocused,
 		staticParameters: {
 			direction,
 			granularity
@@ -29976,6 +30934,10 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends Plugin {
 			MoveSelectionWordRightShortcut,
 			SelectAllShortcut,
 			DeleteLeftShortcut,
+			DeleteWordLeftShortcut,
+			DeleteWordRightShortcut,
+			DeleteLineStartShortcut,
+			DeleteLineEndShortcut,
 			DeleteRightShortcut,
 			CloseHeaderFooterShortcut,
 			BreakLineShortcut,
@@ -30052,10 +31014,12 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends Plugin {
 	_initRenderModules() {
 		[
 			[DocEventManagerService],
+			[DocFieldRenderController],
 			[DocFloatMenuService],
 			[DocPasteOptionsRenderController],
 			[DocParagraphMenuService],
 			[DocHeaderFooterController],
+			[DocHeaderFooterRibbonController],
 			[DocResizeRenderController],
 			[DocParagraphPlaceholderRenderController],
 			[DocContextMenuRenderController],
@@ -31160,4 +32124,4 @@ function MobileRichTextEditor(props) {
 }
 
 //#endregion
-export { AfterSpaceCommand, AlignCenterCommand, AlignJustifyCommand, AlignLeftCommand, AlignMenuItemFactory, AlignOperationCommand, AlignRightCommand, BackgroundColorSelectorMenuItemFactory, BoldMenuItemFactory, BreakLineCommand, BulletListCommand, BulletListTypePicker, ChangeListNestingLevelCommand, ChangeListNestingLevelType, ChangeListTypeCommand, CheckListCommand, CoverContentCommand, CreateDocTableCommand, CutContentCommand, DEFAULT_DOC_FIT_TO_WIDTH_OPTIONS, DOCS_COMPONENT_BACKGROUND_LAYER_INDEX, DOCS_COMPONENT_DEFAULT_Z_INDEX, DOCS_COMPONENT_HEADER_LAYER_INDEX, DOCS_COMPONENT_MAIN_LAYER_INDEX, DOCS_UI_PLUGIN_CONFIG_KEY, DOCS_VIEW_KEY, DOC_CONTENT_INSERT_MENU_ID, DOC_CUSTOM_RANGE_CHROME_BACKGROUND_ALPHA, DOC_CUSTOM_RANGE_CHROME_RADIUS, DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, DOC_PARAGRAPH_T_ALIGN_MENU_ID, DOC_PARAGRAPH_T_COLORS_MENU_ID, DOC_PARAGRAPH_T_DIVIDER_MENU_ID, DOC_PARAGRAPH_T_EDIT_MENU_ID, DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID, DOC_PARAGRAPH_T_INSERT_MENU_ID, DOC_TABLE_BLOCK_MENU_ID, DOC_VERTICAL_PADDING, DeleteCurrentParagraphCommand, DeleteCustomBlockCommand, DeleteLeftCommand, DeleteRightCommand, DocAutoFormatService, DocBackScrollRenderController, DocCanvasPopManagerService, DocClipboardPasteAdapterService, DocContextualRibbonService, DocCopyCommand, DocCreateTableOperation, DocCutCommand, DocEventManagerService, DocFloatMenuService, DocHtmlExportService, DocIMEInputManagerService, DocLayoutInteractionService, DocMobileElementMenuService, DocPageLayoutService, DocParagraphMenuService, DocParagraphPlaceholderRenderController, DocPasteCommand, DocPrintInterceptorService, DocRenderController, DocSelectAllCommand, DocSelectionRenderService, DocTableDeleteColumnsCommand, DocTableDeleteRowsCommand, DocTableDeleteTableCommand, DocTableInsertColumnCommand, DocTableInsertColumnLeftCommand, DocTableInsertColumnRightCommand, DocTableInsertRowAboveCommand, DocTableInsertRowBellowCommand, DocTableInsertRowCommand, DocTableTabCommand, DocUIController, DocViewScaleService, DocsRenderService, menuSchema as DocsUIMenuSchema, EMPTY_PARAGRAPH_MENU_ID, Editor, EditorService, EnterCommand, FLOAT_TEXT_STYLE_MENU_ID, FLOAT_TOOLBAR_MENU_POSITION, FloatTextStyleMenuItemFactory, FontFamilySelectorMenuItemFactory, FontSizeSelectorMenuItemFactory, HorizontalLineCommand, IDocClipboardPasteAdapterService, IDocClipboardService, IDocEmbedInteractionBoundaryService, IDocEmbedRuntimeFocusCoordinator, IEditorService, IMEInputCommand, INSERT_BELLOW_MENU_ID, InnerPasteCommand, InsertCustomRangeCommand, ItalicMenuItemFactory, ListOperationCommand, MOBILE_DOC_ELEMENT_MENU, MergeTwoParagraphCommand, MobileDocElementMenu, MobileRichTextEditor, MobileRichTextToolbar, MoveCursorOperation, MoveDocBlockCommand, MoveSelectionOperation, NORMAL_TEXT_SELECTION_PLUGIN_NAME, NodePositionConvertToCursor, NodePositionConvertToRectRange, OrderListCommand, OrderListTypePicker, ParagraphMenuInsertBelowSubmenuItemFactory, LarkPastePlugin as PastePluginLark, UniverPastePlugin as PastePluginUniver, WordPastePlugin as PastePluginWord, QuickListCommand, RectRange, ReplaceSelectionCommand, ReplaceSnapshotCommand, ReplaceTextRunsCommand, ResetInlineFormatTextBackgroundColorCommand, ResetInlineFormatTextColorCommand, RichTextEditor, SetDocInputStyleCommand, SetDocZoomRatioCommand, SetDocZoomRatioOperation, SetInlineFormatBoldCommand, SetInlineFormatCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextColorCommand, SetInlineFormatTextFillCommand, SetInlineFormatUnderlineCommand, SetParagraphNamedStyleCommand, StrikeThroughMenuItemFactory, SwitchDocModeCommand, TEXT_RANGE_LAYER_INDEX, TabCommand, TextColorSelectorMenuItemFactory, TextRange, ToggleCheckListCommand, UnderlineMenuItemFactory, UniverDocsMobileUIPlugin, UniverDocsUIPlugin, VIEWPORT_KEY, addCustomDecorationBySelectionFactory, addCustomDecorationFactory, buildMoveDocBlockActions, calcDocFitToWidthScale, calcDocRangePositions, captureTextFormat, collectDocsTableLikeEmbedChildUnitIds, convertBodyToHtml, convertClipboardHtmlToDocumentData, convertClipboardRtfToPlainText, convertPositionsToRectRanges, createDefaultDocsTableLikeCustomBlockBleedViewport, createDocsCustomBlockSizeRefreshScheduler, createEditorUndoRedoKeyboardConfig, deleteCustomDecorationFactory, disableMenuWhenHeaderFooterEditing, disableMenuWithoutDocumentUnitPermission, drawDocCustomRangeChrome, executeEditorUndoRedoCommand, findDocRangeNodePositions, genTableSource, generateParagraphs, getAnchorBounding, getCanvasOffsetByEngine, getCommandSkeleton, getCursorWhenDelete, getCutActionsFromDocRanges, getDocBlockRangeMenuId, getDocObjectById, getEmptyTableCell, getEmptyTableRow, getLineBounding, getListMarkerFallbackBound, getListParagraphContextMenuHit, getOneTextSelectionRange, getStyleInTextRange, getTableColumn, getTextRangeFromCharIndex, hasParagraphInTable, hideMenuWhenSelectionInBlockRange, isInSameTableCell, isTextRangeInAnyBlockRange, isValidRectRange, neoGetDocObject, normalizeDocFitToWidthOptions, removeClipboardHtmlImages, resolveDocCustomRangeChromeTheme, resolveDocFitBaseWidth, resolveDocViewScale, resolveDocsCustomBlockRenderViewport, resolveDocsTableLikeCustomBlockBleedViewport, resolveDocsTableLikeCustomBlockContentHeight, resolveDocsTableLikeCustomBlockContentWidth, scrollDocsTableLikeCustomBlockLive, shouldRefreshDocsCustomBlockSizeForCommand, useEditor, useEditorClickOutside, useIsFocusing, useKeyboardEvent, useLeftAndRightArrow, useOnChange, useResize, whenDocAndEditorFocused };
+export { AfterSpaceCommand, AlignCenterCommand, AlignJustifyCommand, AlignLeftCommand, AlignMenuItemFactory, AlignOperationCommand, AlignRightCommand, BackgroundColorSelectorMenuItemFactory, BoldMenuItemFactory, BreakLineCommand, BulletListCommand, BulletListTypePicker, ChangeListNestingLevelCommand, ChangeListNestingLevelType, ChangeListTypeCommand, CheckListCommand, CoverContentCommand, CreateDocTableCommand, CutContentCommand, DEFAULT_DOC_FIT_TO_WIDTH_OPTIONS, DOCS_COMPONENT_BACKGROUND_LAYER_INDEX, DOCS_COMPONENT_DEFAULT_Z_INDEX, DOCS_COMPONENT_HEADER_LAYER_INDEX, DOCS_COMPONENT_MAIN_LAYER_INDEX, DOCS_UI_PLUGIN_CONFIG_KEY, DOCS_VIEW_KEY, DOC_CONTENT_INSERT_MENU_ID, DOC_CUSTOM_RANGE_CHROME_BACKGROUND_ALPHA, DOC_CUSTOM_RANGE_CHROME_RADIUS, DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, DOC_PARAGRAPH_T_ALIGN_MENU_ID, DOC_PARAGRAPH_T_COLORS_MENU_ID, DOC_PARAGRAPH_T_DIVIDER_MENU_ID, DOC_PARAGRAPH_T_EDIT_MENU_ID, DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID, DOC_PARAGRAPH_T_INSERT_MENU_ID, DOC_TABLE_BLOCK_MENU_ID, DOC_VERTICAL_PADDING, DeleteCurrentParagraphCommand, DeleteCustomBlockCommand, DeleteLeftCommand, DeleteRightCommand, DocAutoFormatService, DocBackScrollRenderController, DocCanvasPopManagerService, DocClipboardPasteAdapterService, DocContextualRibbonService, DocCopyCommand, DocCreateTableOperation, DocCutCommand, DocEventManagerService, DocFloatMenuService, DocHtmlExportService, DocIMEInputManagerService, DocLayoutInteractionService, DocMobileElementMenuService, DocPageLayoutService, DocParagraphMenuService, DocParagraphPlaceholderRenderController, DocPasteCommand, DocPrintInterceptorService, DocRenderController, DocSelectAllCommand, DocSelectionRenderService, DocTableDeleteColumnsCommand, DocTableDeleteRowsCommand, DocTableDeleteTableCommand, DocTableInsertColumnCommand, DocTableInsertColumnLeftCommand, DocTableInsertColumnRightCommand, DocTableInsertRowAboveCommand, DocTableInsertRowBellowCommand, DocTableInsertRowCommand, DocTableTabCommand, DocUIController, DocViewScaleService, DocsRenderService, menuSchema as DocsUIMenuSchema, EMPTY_PARAGRAPH_MENU_ID, Editor, EditorService, EnterCommand, FLOAT_TEXT_STYLE_MENU_ID, FLOAT_TOOLBAR_MENU_POSITION, FloatTextStyleMenuItemFactory, FontFamilySelectorMenuItemFactory, FontSizeSelectorMenuItemFactory, HorizontalLineCommand, IDocClipboardPasteAdapterService, IDocClipboardService, IDocEmbedInteractionBoundaryService, IDocEmbedRuntimeFocusCoordinator, IEditorService, IMEInputCommand, INSERT_BELLOW_MENU_ID, InnerPasteCommand, InsertCustomRangeCommand, ItalicMenuItemFactory, ListOperationCommand, MOBILE_DOC_ELEMENT_MENU, MergeTwoParagraphCommand, MobileDocElementMenu, MobileRichTextEditor, MobileRichTextToolbar, MoveCursorOperation, MoveDocBlockCommand, MoveSelectionOperation, NORMAL_TEXT_SELECTION_PLUGIN_NAME, NodePositionConvertToCursor, NodePositionConvertToRectRange, OrderListCommand, OrderListTypePicker, ParagraphMenuInsertBelowSubmenuItemFactory, LarkPastePlugin as PastePluginLark, UniverPastePlugin as PastePluginUniver, WordPastePlugin as PastePluginWord, QuickListCommand, RectRange, ReplaceSelectionCommand, ReplaceSnapshotCommand, ReplaceTextRunsCommand, ResetInlineFormatTextBackgroundColorCommand, ResetInlineFormatTextColorCommand, RichTextEditor, SetDocInputStyleCommand, SetDocZoomRatioCommand, SetDocZoomRatioOperation, SetInlineFormatBoldCommand, SetInlineFormatCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextColorCommand, SetInlineFormatTextFillCommand, SetInlineFormatUnderlineCommand, SetParagraphNamedStyleCommand, StrikeThroughMenuItemFactory, SwitchDocModeCommand, TEXT_RANGE_LAYER_INDEX, TabCommand, TextColorSelectorMenuItemFactory, TextRange, ToggleCheckListCommand, UnderlineMenuItemFactory, UniverDocsMobileUIPlugin, UniverDocsUIPlugin, VIEWPORT_KEY, addCustomDecorationBySelectionFactory, addCustomDecorationFactory, buildMoveDocBlockActions, calcDocFitToWidthScale, calcDocRangePositions, captureTextFormat, collectDocsTableLikeEmbedChildUnitIds, convertBodyToHtml, convertClipboardHtmlToDocumentData, convertClipboardRtfToPlainText, convertPositionsToRectRanges, createDefaultDocsTableLikeCustomBlockBleedViewport, createDocsCustomBlockSizeRefreshScheduler, createEditorUndoRedoKeyboardConfig, deleteCustomDecorationFactory, disableMenuWhenHeaderFooterEditing, disableMenuWithoutDocumentUnitPermission, drawDocCustomRangeChrome, executeEditorUndoRedoCommand, findDocRangeNodePositions, genTableSource, generateParagraphs, getAnchorBounding, getCanvasOffsetByEngine, getCommandSkeleton, getCursorWhenDelete, getCutActionsFromDocRanges, getDocBlockRangeMenuId, getDocObjectById, getEditorRuntimeConfig, getEmptyTableCell, getEmptyTableRow, getLineBounding, getListMarkerFallbackBound, getListParagraphContextMenuHit, getOneTextSelectionRange, getStyleInTextRange, getTableColumn, getTextRangeFromCharIndex, hasParagraphInTable, hideMenuWhenSelectionInBlockRange, isInSameTableCell, isTextRangeInAnyBlockRange, isValidRectRange, neoGetDocObject, normalizeDocFitToWidthOptions, registerEditorRuntimeConfig, removeClipboardHtmlImages, resolveDocCustomRangeChromeTheme, resolveDocFitBaseWidth, resolveDocViewScale, resolveDocsCustomBlockRenderViewport, resolveDocsTableLikeCustomBlockBleedViewport, resolveDocsTableLikeCustomBlockContentHeight, resolveDocsTableLikeCustomBlockContentWidth, scrollDocsTableLikeCustomBlockLive, shouldRefreshDocsCustomBlockSizeForCommand, useEditor, useEditorClickOutside, useIsFocusing, useKeyboardEvent, useLeftAndRightArrow, useOnChange, useResize, whenDocAndEditorFocused };